<!--扫码绑定账号-->
<template>
  <div class="main_container">
    <div class="g-logo"></div>
    <div class="description">
      账号尚未进行授权绑定，请按照如下步骤完成绑定：<br />
      1. 以科研人员角色登录<strong>科研管理平台pc端</strong><br />
      2. 鼠标悬停右上角二维码图标，展开系统绑定二维码<br />
      3. 点击下方扫一扫按钮，扫描二维码自动绑定账号

    </div>
    <van-button @click="scan"
                icon="images/login/icon_scan_btn.svg"
                loading-text="加载中请稍后..."
                :loading="loading">扫一扫</van-button>
  </div>
</template>

<script>
import { doScan, formatResult } from '@/hooks/useScan'
import { getDockingConfig, bindAccount } from '@/api/request/basic'
import { mobileResultCode } from '@/assets/js/common'
import { Toast } from 'vant'
import router from '@/router'
import { ref } from 'vue'
import { useStore } from 'vuex'
export default {
  props: {
    userId: {
      required: true,
      type: String
    }
  },
  setup (props) {
    let dockingConfig = {}
    const loading = ref(true)
    const store = useStore()
    getDockingConfig({ url: window.location.href.split('#')[0] }).then(response => {
      loading.value = false
      try {
        dockingConfig = response.body.data.item
      } catch (errpr) {
        Toast.fail({
          message: '扫一扫配置接口发生错误',
          duration: 6000
        })
      }
    })
    const callback = (data) => {
      const scanResult = formatResult(store.getters.systemConfig.servMode, data)
      if (scanResult.account) {
        bindAccount({
          bindUserId: props.userId,
          account: scanResult.account
        }).then(res => {
          if (res.body.code === mobileResultCode.SUCCESS) {
            // 绑定成功，将登录相关信息缓存
            const responseItem = res.body.data.item
            const userInfo = {
              token: responseItem.key,
              roles: responseItem.userGroups,
              userName: responseItem.userName,
              // currentRole: responseItem.groupName
            }
            store.dispatch('recordUserInfo', userInfo)
            store.dispatch('recordCurrentRoleName', responseItem.groupName)
            store.dispatch('recordMenus', responseItem.joinCheckModules.reverse())
            Toast.success({
              message: '绑定成功\n 即将进入首页',
              duration: 2000,
              onClose: () => {
                router.push('index')
              }
            })
            return
          }
          Toast.fail({
            message: `绑定失败，原因: ${res.body.data.message}`,
            duration: 6000
          })
          return false
        })
      } else {
        Toast.fail({
          message: '无法识别此二维码，请扫描科研系统后台二维码进行扫码绑定',
          duration: 6000
        })
      }
    }
    const scan = () => {
      doScan(store.getters.systemConfig.servMode, dockingConfig, callback)
    }
    return {
      scan,
      loading
    }
  }
}
</script>

<style scoped>
.main_container {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep(.van-icon__image) {
  width: 32px;
  height: 32px;
}
.g-logo {
  width: 239.63px;
  height: 146.87px;
  margin: 0 auto;
  background-size: cover;
  background-image: url(../images/login/icon_scan_banner.png) !important;
}
.description {
  padding: 30px 0px;
  color: #666666;
  font-size: 12px;
  text-align: left;
  line-height: 21px;
}
strong {
  color: #333333;
}
button {
  width: 164px;
  height: 44px;
  background-color: var(--van-nav-bar-background-color);
  color: #fff;
}

::v-deep(.van-icon__image) {
  width: 30px !important;
  height: 19px !important;
}
</style>
